<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024年12月10日, 0010
  Time: 09:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <!-- 1.引入css样式文件 -->
    <!-- 1-1.引入 Bootstrap Core CSS -->
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css"
          rel="stylesheet" />
    <!-- 2.引入js文件 -->
    <!-- 2-1.引入 jQuery -->
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <!-- 2-1.引入Bootstrap Core JavaScript -->
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
        }
        .profile-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            margin: auto;
            margin-top: 50px;
        }
        .profile-image {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid #007bff;
        }
        @keyframes b
        {
            0%   {background:url("${pageContext.request.contextPath}/static/images/1.jpg");}
            34%  {background:url("${pageContext.request.contextPath}/static/images/2.jpg");}
            67%  {background:url("${pageContext.request.contextPath}/static/images/3.jpg");}
            100% {background:url("${pageContext.request.contextPath}/static/images/1.jpg");}
        }
    </style>
</head>
<body style="background-image: url('${pageContext.request.contextPath}/static/images/1.jpg'); background-size: cover; animation-name:b;
        animation-duration:20s;
        /*变换时间*/
        animation-delay:2s;
        /*动画开始时间*/
        animation-iteration-count:infinite;
        /*下一周期循环播放*/
        animation-play-state:running;
        /*动画开始运行*/">

<!-- 3.在页面的上方导入菜单导航条navigation.jsp -->
<jsp:include page="user_navigation.jsp" />
<div class="container" >
    <div class="profile-card text-center" style="background: rgba(255, 255, 255, 0.6);">
        <h2>个人信息</h2>
        <img src="${pageContext.request.contextPath}/static/images/login.jpg" alt="用户头像" class="profile-image">
        <h3 id="userName">${person.username}</h3>
        <p id="userTitle">${person.gender}</p>
        <div class="mt-4">
            <h5>个人简介</h5>
            <p id="userBio">${person.introduce}</p>
        </div>
        <div class="mt-4">
            <h5>联系方式</h5>
            <p><strong>邮箱:</strong> <span id="userEmail">${person.email}</span></p>
            <p><strong>电话:</strong> <span id="userPhone">${person.telephone}</span></p>
        </div>
        <button class="btn btn-primary" data-toggle="modal" data-target="#editProfileModal">编辑信息</button>
    </div>
</div>

<!-- 编辑信息模态框 -->
<div class="modal fade" id="editProfileModal" tabindex="-1" role="dialog" aria-labelledby="editProfileModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editProfileModalLabel">编辑个人信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editProfileForm">
                    <div class="form-group">
                        <label for="editUserName">姓名</label>
                        <input type="text" class="form-control" id="editUserName" value="${person.username}" required>
                    </div>
                    <div class="form-group">
                        <label for="editUserTitle">职称</label>
                        <input type="text" class="form-control" id="editUserTitle" value="${person.gender}" required>
                    </div>
                    <div class="form-group">
                        <label for="editUserBio">个人情况</label>
                        <textarea class="form-control" id="editUserBio" rows="3" required>${person.introduce}</textarea>
                    </div>
                    <div class="form-group">
                        <label for="editUserEmail">邮箱</label>
                        <input type="email" class="form-control" id="editUserEmail" value="${person.email}" required>
                    </div>
                    <div class="form-group">
                        <label for="editUserPhone">电话</label>
                        <input type="tel" class="form-control" id="editUserPhone" value="${person.telephone}" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveChanges" onclick="updatePerson(${person.id})">保存更改</button>
            </div>
        </div>
    </div>
</div>

<!-- 引入 jQuery 和 Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function() {
        $('#saveChanges').on('click', function() {
            // 获取用户输入的数据
            const userName = $('#editUserName').val();
            const userTitle = $('#editUserTitle').val();
            const userBio = $('#editUserBio').val();
            const userEmail = $('#editUserEmail').val();
            const userPhone = $('#editUserPhone').val();

            // 更新页面上的信息
            $('#userName').text(userName);
            $('#userTitle').text(userTitle);
            $('#userBio').text(userBio);
            $('#userEmail').text(userEmail);
            $('#userPhone').text(userPhone);

            // 关闭模态框
            $('#editProfileModal').modal('hide');
        });
    });
    function updatePerson(id) {
// 2.创建一个javascript中的用户对象，并将页面表单中的各个字段赋值给这个对象的属性。
        var person = new Object();
        // 3.将form表单中的输入控件的值，包括：用户id、用户名、密码、性别、邮箱、
        // 电话号码、自我介绍、用户角色，赋值到用户对象的属性上 。
        person.id=id;
        person.name = $("#editUserName").val();
        person.gender = $("#editUserTitle").val();
        person.introduce = $("#editUserBio").val();
        person.email = $("#editUserEmail").val();
        person.telephone = $("#editUserPhone").val();


// 4. 调用$.ajax()方法，向服务器发送异步http请求
        $.ajax({
            //1) 指定待发送http请求的URL地址。
            url: "${pageContext.request.contextPath}/updatePerson.action",
            //2) 设置http请求的类型，为POST。
            type: "post",
            //3) 指定要发送到服务器的数据的数据类型，支持复杂的包含中文的JSON数据。
            contentType: "application/json;charset=UTF-8",
            //4) 设置要发送到服务器的数据。本例中是将一个javascript中的user对象，
            // 转换成JSON字符串，然后发送到服务器。
            data: JSON.stringify(person),
            //5) 发送http请求，服务器成功响应后，在客户端将要调用的回调方法。
            success: function(data) {
                //本例中，服务器端返回的不是JSON数据，就是一个普通数据。
                if(data =="SUCCESS"){
                    alert("成功修改个人信息");
                    window.location.reload();//重新加载页面
                }else{
                    alert(data);
                    window.location.reload();//重新加载页面
                }
            },

        });
    }




</script>
    </body>
</html>